  <template>
  <div class="box">
    <img src="@/assets/404.svg" />
    <h5>{{ second }}秒钟后跳转至首页.....</h5>
  </div>
</template>
<script>
export default {
  data() {
    return {
      second: 3,
    };
  },
  mounted() {
    let that = this;
    let interval = setInterval(() => {
      that.second--;
      if (that.second == 1) {
        that.$router.push("/login");
        clearInterval(interval);
      }
    }, 1000);
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.box:hover img {
  width: 300px;
  height: 300px;
}

img {
  display: block;
  width: 200px;
  height: 200px;
  transition: width 1s;
  transition: height 1s;
}
</style>